<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="layout-portlets-box">
            <div class="Container100">
                <div class="ContainerIndent">
                    <div class="Container100 TexAlCenter"><i class="fa fa-life-bouy red Fs100 MarTop20"/></div>
                    <h1 class="TexAlCenter Fs40 red">Ronin Documentation</h1>
                    <div class="EmptyBox40"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Installation</div>
                        <div class="EmptyBox10"/>
                        <p>
                            Ronin provides a main <i>template.xhtml</i> and additional <i>layoutmenu.xhtml</i>, <i>topbar.xhtml</i> files for the base layout. These 3 files must be placed under
                            WEB-INF folder. Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder. Other required resources are the css, js, image and font files that are located
                            inside resources/ronin-layout folder, simply copy the ronin-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/ronin-layout/. Please
                            refer to demo app or maven project of the demo app as the reference.
                        </p>
                        <p>
                            Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME context parameter in web.xml as "ronin", refer to <a style="color:#e90c45" href="http://www.primefaces.org/themes">themes page</a> for more information.
                        </p>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Menus</div>
                        <div class="EmptyBox10"/>
                        <p>
                            Ronin provides a multi-level menu positioned at left of the screen. This menu is responsive and adjusts to the screen width automatically.
                            Menu is actually a PrimeFaces component specifically created for Ronin under <i>http://primefaces.org/ronin</i> namespace having <i>menu</i> as the tag name, usage is same as a regular PrimeFaces component that utilizes p:submenu and p:menuitem
                            components. This component is placed inside the Ronin theme jar so this jar must be in your classpath. Demo application features an example menu created declaratively however since this component is a JSF component, you can also use PrimeFaces MenuModel API
                            to create the menu dynamically.
                        </p>

                        <p>Menu is stateful by default, for state saving to work explicit ids must be given to each submenu and menuitem. In case you'd like clean the state, call <i>Ronin.clearMenuState()</i> method with javascript.</p>

                        <p>
                            In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work. These files are included automatically whenever there is a PrimeFaces component on the page that
                            depends on them, however you can easily add them manually if required using h:outputScript component with name attribute values jquery/jquery.js and primefaces.js correspondingly under primefaces library. An example would be
                            <i>&lt;h:outputScript name="jquery/jquery.js" library="primefaces" /&gt;</i>
                        </p>
                    </p:panel>

                    <div class="EmptyBox30"/>


                    <div class="ContainerIndent">
                        <h1 class="TexAlCenter gray Fs30">
                            <span class="red Fs30">Core Layout<br /></span>
                        </h1>
                        <p class="leaden-back" style="color:#778D9B">
                            Core Layout is a set of CSS style classes used to create responsive layouts. Ronin is also based on Core Layout and you may also choose to use this css utility
                            in your application as well however you can also use any other CSS layout framework with Ronin.
                        </p>
                    </div>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Responsive Mode</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Responsive Mode</h:panelGroup>
                            <h:panelGroup class="hardblue">Responsive</h:panelGroup>
                            <h:panelGroup>
                                Makes an element responsive using media queries. For example; <br />
                                if screen width is smaller than 1200px and bigger than 960px, this element's width sets to '33%', <br />
                                and if screen width is smaller than 960px and bigger than 640px, this element's width sets to '50%', <br />
                                and if screen width smaller than 640px, this element's width sets to '100%'. <br />
                                Thus, width of this element adjusted to screen resolution on mobile phones and tablets. <br />
                                Resize browser window to see changes of orange ContainerX boxes below.
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Responsive50</h:panelGroup>
                            <h:panelGroup>
                                Makes an element responsive using media queries. For example; <br />
                                if screen width is smaller than 960px, this element's width sets to '100%', <br />
                                Thus, width of this element adjusted to screen resolution on mobile phones and tablets. <br />
                                Resize browser window to see changes of orange ContainerX boxes below.<br />
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Responsive100</h:panelGroup>
                            <h:panelGroup>Makes an element responsive using media queries. For example; <br />
                                if screen width is smaller than 1200px, this element's width sets to '100%', <br />
                                Thus, width of this element adjusted to screen resolution on mobile phones and tablets. <br />
                                Resize browser window to see changes of orange ContainerX boxes below.<br />
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Container33 navyblue Responsive"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive Element (With Container33 Class)</div></div></div>
                        <div class="Container33 navyblue Responsive"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive Element (With Container33 Class)</div></div></div>
                        <div class="Container33 navyblue Responsive"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive Element (With Container33 Class)</div></div></div>
                        <div class="EmptyBox10"/>
                        <div class="Container60 navyblue Responsive50"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive50 Element (With Container60 Class)</div></div></div>
                        <div class="Container20 navyblue Responsive50"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive50 Element (With Container20 Class)</div></div></div>
                        <div class="Container20 navyblue Responsive50"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive50 Element (With Container20 Class)</div></div></div>
                        <div class="EmptyBox10"/>
                        <div class="Container50 navyblue Responsive100"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive100 Element (With Container50 Class)</div></div></div>
                        <div class="Container20 navyblue Responsive100"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive100 Element (With Container20 Class)</div></div></div>
                        <div class="Container30 navyblue Responsive100"><div class="ContainerIndent"><div class="ShadowBox orangeback">Responsive100 Element (With Container30 Class)</div></div></div>
                        <div class="EmptyBox30"/>
                        <div class="Container50 Responsive50">
                            <div class="ContainerIndent">
                                <p:dataList value="#{dataListView.cars1}" var="car" type="ordered">
                                    <f:facet name="header">
                                        DataList in <span class="black">Container50 Responsive50</span>
                                    </f:facet>
                                    #{car.brand}, #{car.year}
                                </p:dataList>
                            </div>
                        </div>
                        <div class="Container50 Responsive50">
                            <div class="ContainerIndent">
                                <h:form id="form2">
                                    <p:dataList value="#{dataListView.cars2}"
                                                var="car"
                                                type="unordered"
                                                itemType="none"
                                                paginator="true"
                                                rows="7"
                                                styleClass="paginated">
                                        <f:facet name="header">
                                            DataList - Paginator in <span class="black">Container50 Responsive50</span>
                                        </f:facet>
                                        <p:commandLink update=":form2:carDetail" oncomplete="PF('carDialog2').show()" title="View Detail" style="margin-right:10px">
                                            <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
                                            <i class="fa fa-table gray Fs18" style="margin-top:5px;"/>
                                        </p:commandLink>
                                        <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
                                    </p:dataList>

                                    <p:dialog header="Car Info" widgetVar="carDialog2" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
                                        <p:outputPanel id="carDetail" style="text-align:center;">
                                            <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                                                <f:facet name="header">
                                                    <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                                                </f:facet>

                                                <h:outputText value="Id:" />
                                                <h:outputText value="#{dataListView.selectedCar.id}" />

                                                <h:outputText value="Year:" />
                                                <h:outputText value="#{dataListView.selectedCar.year}" />

                                                <h:outputText value="Color:" />
                                                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                                                <h:outputText value="Price:" />
                                                <h:outputText value="$#{dataListView.selectedCar.price}" />
                                            </p:panelGrid>
                                        </p:outputPanel>
                                    </p:dialog>
                                </h:form>
                            </div>
                        </div>
                        <div class="Container60 Responsive100">
                            <div class="ContainerIndent">
                                <h:form>
                                    <p:treeTable value="#{ttSelectionView.root1}"
                                                 var="document"
                                                 selectionMode="single"
                                                 selection="#{ttSelectionView.selectedNode}"
                                                 style="margin-top:0">
                                        <f:facet name="header">
                                            Single TreeTable in <span class="black">Container60 Responsive100</span>
                                        </f:facet>
                                        <p:column headerText="Name" sortBy="#{document.name}">
                                            <h:outputText value="#{document.name}" />
                                        </p:column>
                                        <p:column headerText="Size">
                                            <h:outputText value="#{document.size}" />
                                        </p:column>
                                        <p:column headerText="Type">
                                            <h:outputText value="#{document.type}" />
                                        </p:column>
                                        <f:facet name="footer">
                                            TreeTable Footer
                                        </f:facet>
                                    </p:treeTable>
                                </h:form>
                            </div>
                        </div>
                        <div class="Container40 Responsive100">
                            <div class="ContainerIndent">
                                <h:form>
                                    <p:treeTable value="#{ttSelectionView.root3}"
                                                 var="document"
                                                 selectionMode="checkbox"
                                                 selection="#{ttSelectionView.selectedNodes2}">
                                        <f:facet name="header">
                                            Checkbox TreeTable in <span class="black">Container40 Responsive100</span>
                                        </f:facet>
                                        <p:column headerText="Name">
                                            <h:outputText value="#{document.name}" />
                                        </p:column>
                                        <p:column headerText="Size">
                                            <h:outputText value="#{document.size}" />
                                        </p:column>
                                        <p:column headerText="Type">
                                            <h:outputText value="#{document.type}" />
                                        </p:column>
                                    </p:treeTable>
                                </h:form>
                            </div>
                        </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">ContainerX's</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Containers (For Responsive Layout)</h:panelGroup>
                            <h:panelGroup class="hardblue">
                                Container100 <br />
                                Container96 <br />
                                Container90 <br />
                                Container85 <br />
                                Container80 <br />
                                Container75 <br />
                                Container70 <br />
                                Container60 <br />
                                Container50 <br />
                                Container40 <br />
                                Container33 <br />
                                Container30 <br />
                                Container25 <br />
                                Container20 <br />
                                Container10 <br />
                                Container5
                            </h:panelGroup>
                            <h:panelGroup>
                                Very similar to the WidX classes but has additional features. These classes are aligned left and overflow inside is hidden.
                                ContainerX classes are not mobile-compatible without the 'Repsonsive' class.
                                Resize browser window to see changes of red and orange boxes below. <br />
                                <br />
                                .Container100{ width:100%; overflow:hidden; float:left;} <br />
                                .Container96{ width:96%; overflow:hidden; float:left;} <br />
                                .Container90{ width:90%; overflow:hidden; float:left;} <br />
                                .Container85{ width:85%; overflow:hidden; float:left;} <br />
                                .Container80{ width:80%; overflow:hidden; float:left;} <br />
                                .Container75{ width:75%; overflow:hidden; float:left;} <br />
                                .Container70{ width:70%; overflow:hidden; float:left;} <br />
                                .Container60{ width:60%; overflow:hidden; float:left;} <br />
                                .Container50{ width:50%; overflow:hidden; float:left;} <br />
                                .Container40{ width:40%; overflow:hidden; float:left;} <br />
                                .Container33{ width:33.3%; overflow:hidden; float:left;} <br />
                                .Container30{ width:30%; overflow:hidden; float:left;} <br />
                                .Container25{ width:25%; overflow:hidden; float:left;} <br />
                                .Container20{ width:20%; overflow:hidden; float:left;} <br />
                                .Container10{ width:10%; overflow:hidden; float:left;} <br />
                                .Container5{ width:5%; overflow:hidden; float:left;} <br />
                                .ContainerIndent{width:auto; overflow:hidden; display:block;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20">Container Indent</h:panelGroup>
                            <h:panelGroup class="hardblue">ContainerIndent</h:panelGroup>
                            <h:panelGroup>
                                Depending on the solubility of 'ContainerX' classes allows an indentation. This indentation is controlled by the CSS media-queries.
                                Of the elements inserted into the container , prevents the stop leaning on each other<br />
                                <br />
                                .ContainerIndent{width:auto; overflow:hidden; display:block;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="Fleft redback white Container20 MarAuto Responsive"> <br />Container20 - Responsive<br /><br /> </div>
                        <div class="Fleft blueback white Container30 MarAuto Responsive"> <br />Container30 - Responsive<br /><br /> </div>
                        <div class="Fleft orangeback white Container50 MarAuto Responsive"> <br />Container50 - Responsive<br /><br /> </div>
                        <div class="EmptyBox10"/>
                        <div class="Fleft orangeback white Container33 MarAuto Responsive"> <br />Container33 - Responsive<br /><br /> </div>
                        <div class="Fleft blueback white Container33 MarAuto Responsive"> <br />Container33 - Responsive<br /><br /> </div>
                        <div class="Fleft redback white Container33 MarAuto Responsive"> <br />Container33 - Responsive<br /><br /> </div>
                        <div class="EmptyBox10"/>
                        <div class="Fleft white redback Container40 MarAuto Responsive">Container40<div class="ContainerIndent softgray">Container Indent</div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Text Colors</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Text Coloring</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">
                                grayblue <br />
                                red <br />
                                navyblue <br />
                                softgray <br />
                                white <br />
                                blue <br />
                                orange <br />
                                green <br />
                                leaden <br />
                            </h:panelGroup>
                            <h:panelGroup>
                                Texts paint the selected color <br />
                                <br />
                                .grayblue{color:#A7B8C1;} <br />
                                .red{color:#CE2246;} <br />
                                .navyblue{color:#003D50;} <br />
                                .softgray{color:#E8E8E8;} <br />
                                .white{color:#ffffff;} <br />
                                .blue{color:#1C75BC;} <br />
                                .orange{color:#FBB040;} <br />
                                .green{color:#2BB673;} <br />
                                .leaden{color:#778D9B;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="grayblue Fs18">Gray Blue Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="red Fs18">Red Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="navyblue Fs18">Navy Blue Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="softgray Fs18">Soft Gray Text</div></div></div>
                        <div class="Container20 Responsive " style="background-color:#3B3D3F;"><div class="ContainerIndent"><div class="white Fs18">White Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="blue Fs18">Blue Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="orange Fs18">Orange Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="green Fs18">Green Text</div></div></div>
                        <div class="Container20 Responsive "><div class="ContainerIndent"><div class="leaden Fs18">Leaden Text</div></div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Background Colors</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Background Coloring</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">
                                grayblue <br />
                                redback <br />
                                navyblueback <br />
                                softgrayback <br />
                                whiteback <br />
                                blueback <br />
                                orangeback <br />
                                greenback <br />
                                leadenback <br />
                            </h:panelGroup>
                            <h:panelGroup>
                                Boxes paint the selected color <br /> <br />
                                .grayblueback{background-color:#A7B8C1;}<br />
                                .redback{background-color:#CE2246;}<br />
                                .navyblueback{background-color:#003D50;}<br />
                                .softgrayback{background-color:#E8E8E8;}<br />
                                .whiteback{background-color:#ffffff;}<br />
                                .blueback{background-color:#1C75BC;}<br />
                                .orangeback{background-color:#FBB040;}<br />
                                .greenback{background-color:#2BB673;}<br />
                                .leadenback{background-color:#778D9B;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Container20 Responsive grayblueback"><div class="ContainerIndent"><div class="white Fs18">grayblueback</div></div></div>
                        <div class="Container20 Responsive redback"><div class="ContainerIndent"><div class="white Fs18">redback</div></div></div>
                        <div class="Container20 Responsive navyblueback"><div class="ContainerIndent"><div class="white Fs18">navyblueback</div></div></div>
                        <div class="Container20 Responsive softgrayback"><div class="ContainerIndent"><div class="navyblue Fs18">softgrayback</div></div></div>
                        <div class="Container20 Responsive whiteback"><div class="ContainerIndent"><div class="navyblue Fs18">whiteback</div></div></div>
                        <div class="Container20 Responsive blueback"><div class="ContainerIndent"><div class="white Fs18">blueback</div></div></div>
                        <div class="Container20 Responsive orangeback"><div class="ContainerIndent"><div class="white Fs18">orangeback</div></div></div>
                        <div class="Container20 Responsive greenback"><div class="ContainerIndent"><div class="white Fs18">greenback</div></div></div>
                        <div class="Container20 Responsive leadenback"><div class="ContainerIndent"><div class="white Fs18">leadenback</div></div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Top Border Colors (For ShadowBoxes or Any Other Elements)</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Top Border Adding And Coloring</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">
                                RedBorderedBox <br />
                                NavyBlueBorderedBox <br />
                                BlueBorderedBox <br />
                                OrangeBorderedBox <br />
                                GreenBorderedBox <br />
                            </h:panelGroup>
                            <h:panelGroup>
                                In determining the upper limit gives the color and 4 pixels top border  <br />
                                <br />
                                .RedBorderedBox{ border-top:solid 4px #CE2246;} <br />
                                .NavyBlueBorderedBox{ border-top:solid 4px #003D50;} <br />
                                .BlueBorderedBox{ border-top:solid 4px #1C75BC;} <br />
                                .OrangeBorderedBox{ border-top:solid 4px #FBB040;} <br />
                                .GreenBorderedBox{ border-top:solid 4px #2BB673;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="grayblueback">
                        <div class="Container20 Responsive"><div class="ContainerIndent"><div class="ShadowBox whiteback RedBorderedBox navyblue Fs18">RedBorderedBox</div></div></div>
                        <div class="Container20 Responsive"><div class="ContainerIndent"><div class="ShadowBox whiteback NavyBlueBorderedBox navyblue Fs18">NavyBlueBorderedBox</div></div></div>
                        <div class="Container20 Responsive"><div class="ContainerIndent"><div class="ShadowBox whiteback BlueBorderedBox navyblue Fs18">BlueBorderedBox</div></div></div>
                        <div class="Container20 Responsive"><div class="ContainerIndent"><div class="ShadowBox whiteback OrangeBorderedBox navyblue Fs18">OrangeBorderedBox</div></div></div>
                        <div class="Container20 Responsive"><div class="ContainerIndent"><div class="ShadowBox whiteback GreenBorderedBox navyblue Fs18">GreenBorderedBox</div></div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Selection</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Selection</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">Unselectable</h:panelGroup>
                            <h:panelGroup>Makes text unselectable <br />
                                <br />
                                .Unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
                                </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Container100 red Responsive"><div class="ContainerIndent"><div class="ContainerIndent Unselectable">This is unselectable text</div></div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Visibilites, Floating And Width Settings on Devices</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Visibilities According To The Platform</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">ShowOnMobile</h:panelGroup>
                            <h:panelGroup>Only visible on screen widths smaller than 960px.</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30"></h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">ShowOnDesktop</h:panelGroup>
                            <h:panelGroup>Only visible on screen widths bigger than 960px.</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Floating According To The Platform</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">FloatNoneOnMobile</h:panelGroup>
                            <h:panelGroup>Removes floating on screen widths smaller than 960px.</h:panelGroup>

                            <h:panelGroup class="Fs20 Wid30">Width Setting For The Platform</h:panelGroup>
                            <h:panelGroup class="hardblue Wid30">WidAutoOnMobile</h:panelGroup>
                            <h:panelGroup>Switches to auto width on screen widths smaller than 640px so that element with depends on its content.</h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Container100">
                            <div class="Container70 Responsive50">

                                <p:inputText placeholder="Only visible if screen width is smaller than 960px." styleClass="Fleft Wid90 ShowOnMobile" />
                                <div class="EmptyBox10"/>
                                <p:inputText placeholder="Only visible if screen width is bigger than 960px." styleClass="Fleft Wid90 ShowOnDesktop" />
                                <div class="EmptyBox10"/>
                                <p:inputText placeholder="Cc;" styleClass="Fleft Wid90" />
                            </div>
                            <div class="EmptyBox10 ShowOnMobile"/>
                            <div class="Container30 Responsive50">
                                <p:inputTextarea rows="5"
                                                 cols="20"
                                                 placeholder="Floating is removed if screen width is smaller than 960px"
                                                 styleClass="Wid90 Fright FloatNoneOnMobile"/>
                            </div>
                        </div>

                        <div class="EmptyBox10"/>
                        <div class="Seperator"/>
                        <div class="EmptyBox10"/>

                        <div class="Container100">
                            <div class="Container40 Responsive50">
                                <p:inputText placeholder="InputField 1" styleClass="Fleft Wid90" />
                                <div class="EmptyBox10"/>
                                <p:inputText placeholder="InputField 2" styleClass="Fleft Wid90" />
                                <div class="EmptyBox10"/>
                                <p:inputText placeholder="InputField 3" styleClass="Fleft Wid90" />
                            </div>
                            <div class="EmptyBox10 ShowOnMobile"/>
                            <div class="Container60 Responsive50">
                                <p:inputTextarea rows="5"
                                                 cols="20"
                                                 placeholder="This element is floated right and will still be floated on smaller screens causing layout issues since it does not have FloatNoneOnMobile."
                                                 styleClass="Wid90 Fright"/>
                            </div>
                        </div>

                        <div class="EmptyBox10"/>
                        <div class="Seperator"/>
                        <div class="EmptyBox10"/>

                        <div class="Container30 orangeback white WidAutoOnMobile">
                            <div class="ContainerIndent">This element has 30% width on bigger screens and auto width on smaller screens as it uses WidAutoOnMobile.</div>
                        </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Displaying</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Displaying</h:panelGroup>
                            <h:panelGroup class="hardblue">DispBlock</h:panelGroup>
                            <h:panelGroup>
                                Displays an element as a block element <br />
                                <br />
                                .DispBlock{ display:block;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">DispNone</h:panelGroup>
                            <h:panelGroup>
                                The element will not be displayed at all (has no effect on layout)<br />
                                <br />
                                .DispNone{display:none;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">DispTable</h:panelGroup>
                            <h:panelGroup>
                                Let the element behave like a table element <br />
                                <br />
                                .DispTable{display:table;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">DispInlBlock</h:panelGroup>
                            <h:panelGroup>
                                Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box <br />
                                <br />
                                .DispInlBlock{display:inline-block;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">DispTableCell</h:panelGroup>
                            <h:panelGroup>
                                Let the element behave like a td element <br />
                                <br />
                                .DispTableCell{ display:table-cell; vertical-align:middle;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel></p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Positioning</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Positioning</h:panelGroup>
                            <h:panelGroup class="hardblue">PosFixed</h:panelGroup>
                            <h:panelGroup>
                                The element is positioned relative to the browser window <br />
                                <br />
                                .PosFixed{position:fixed;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">PosAbsolute</h:panelGroup>
                            <h:panelGroup>
                                The element is positioned relative to its first positioned (not static) ancestor element <br />
                                <br />
                                .PosAbsolute{position:absolute;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">PosRelative</h:panelGroup>
                            <h:panelGroup>
                                The element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the element's LEFT position <br />
                                <br />
                                .PosRelative{ position:relative;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">PosStatic</h:panelGroup>
                            <h:panelGroup>
                                Default value. Elements render in order, as they appear in the document flow <br />
                                <br />
                                .PosStatic{position:static;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel></p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Underline</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Text Decoration</h:panelGroup>
                            <h:panelGroup class="hardblue">Underline</h:panelGroup>
                            <h:panelGroup>
                                Defines a line below the text <br />
                                <br />
                                .Underline{ text-decoration:underline;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Underline TexAlCenter">This is underlined text</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Floating</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Floating</h:panelGroup>
                            <h:panelGroup class="hardblue">Fleft</h:panelGroup>
                            <h:panelGroup>
                                The element floats to the left <br />
                                <br />
                                .Fleft{ float:left;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Fright</h:panelGroup>
                            <h:panelGroup>
                                The element floats to the right <br />
                                <br />
                                .Fleft{ float:right;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Fnone</h:panelGroup>
                            <h:panelGroup>
                                The element is not floated, and will be displayed just where it occurs in the text. <br />
                                <br />
                                .Fleft{ float:none;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel>
                        <div class="Fleft BorderedBox orange Wid20">This is floats to the left</div>
                        <div class="Fright BorderedBox orange Wid20">This is floats to the right</div>
                        <div class="Fnone BorderedBox orange Wid20">This is not floated (default)</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Overflows</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Overflow</h:panelGroup>
                            <h:panelGroup class="hardblue">OvHidden</h:panelGroup>
                            <h:panelGroup>
                                The overflow is clipped, and the rest of the content will be invisible <br />
                                <br />
                                .OvHidden{ overflow:hidden;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">OvScroll</h:panelGroup>
                            <h:panelGroup>
                                The overflow is clipped, but a scroll-bar is added to see the rest of the content <br />
                                <br />
                                .OvScroll{ overflow:scroll;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">OvAuto</h:panelGroup>
                            <h:panelGroup>
                                If overflow is clipped, a scroll-bar should be added to see the rest of the content <br />
                                <br />
                                .OvAuto{ overflow:auto;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">OvVisible</h:panelGroup>
                            <h:panelGroup>
                                The overflow is not clipped. It renders outside the element's box. <br />
                                <br />
                                .OvVisible{ overflow:visible;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">
                                OvXScroll <br />
                                OvYScroll <br />
                                OvXHidden <br />
                                OvYHidden
                            </h:panelGroup>
                            <h:panelGroup>
                                Axis of the elements (X or Y) mentioned were hidden or scroll <br />
                                <br />
                                .OvXScroll{ overflow-x:scroll;} , .OvYScroll{ overflow-y:scroll;} , .OvXHidden{ overflow-x:hidden;} , .OvYHidden{ overflow-y:hidden;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <p:button value="Get More Info About Overflows"
                                  onclick="window.open('http://www.w3schools.com/cssref/pr_pos_overflow.asp', '_blank')"/>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Empty Boxes</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Empty Boxes</h:panelGroup>
                            <h:panelGroup class="hardblue">
                                EmptyBox5 <br />
                                EmptyBox10 <br />
                                EmptyBox20 <br />
                                EmptyBox30 <br />
                                EmptyBox40 <br />
                                EmptyBox50 <br />
                                EmptyBox60 <br />
                                EmptyBox70 <br />
                                EmptyBox80 <br />
                                EmptyBox90 <br />
                                EmptyBox100 <br />
                                EmptyBox110 <br />
                                EmptyBox120 <br />
                                EmptyBox130 <br />
                                EmptyBox140 <br />
                                EmptyBox150
                            </h:panelGroup>
                            <h:panelGroup>
                                Horizontally , leaving space so that the value of the specified number of pixels <br />
                                <br />
                                .EmptyBox5{ display:block; width:100%; height:5px; overflow:hidden;} <br />
                                .EmptyBox10{ display:block; width:100%; height:10px; overflow:hidden;} <br />
                                .EmptyBox20{ display:block; width:100%; height:20px; overflow:hidden;} <br />
                                .EmptyBox30{ display:block; width:100%; height:30px; overflow:hidden;} <br />
                                .EmptyBox40{ display:block; width:100%; height:40px; overflow:hidden;} <br />
                                .EmptyBox50{ display:block; width:100%; height:50px; overflow:hidden;} <br />
                                .EmptyBox60{ display:block; width:100%; height:60px; overflow:hidden;} <br />
                                .EmptyBox70{ display:block; width:100%; height:70px; overflow:hidden;} <br />
                                .EmptyBox80{ display:block; width:100%; height:80px; overflow:hidden;} <br />
                                .EmptyBox90{ display:block; width:100%; height:90px; overflow:hidden;} <br />
                                .EmptyBox100{ display:block; width:100%; height:100px; overflow:hidden;} <br />
                                .EmptyBox110{ display:block; width:100%; height:100px; overflow:hidden;} <br />
                                .EmptyBox120{ display:block; width:100%; height:100px; overflow:hidden;} <br />
                                .EmptyBox130{ display:block; width:100%; height:100px; overflow:hidden;} <br />
                                .EmptyBox140{ display:block; width:100%; height:100px; overflow:hidden;} <br />
                                .EmptyBox150{ display: block; width: 100%; height:150px; overflow:hidden;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="BorderedBox red PadWithBorder10 Wid20 MarAuto">Content</div>
                        <div class="EmptyBox30">this is empty box with 30px height value (EmptyBox30)</div>
                        <div class="BorderedBox red PadWithBorder10 Wid20 MarAuto">Content</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Opacity</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Opacity</h:panelGroup>
                            <h:panelGroup class="hardblue">
                                OpacZero <br />
                                Opac10 <br />
                                Opac20 <br />
                                Opac30 <br />
                                Opac40 <br />
                                Opac50 <br />
                                Opac60 <br />
                                Opac70 <br />
                                Opac80 <br />
                                Opac90 <br />
                                Opac95 <br />
                                Opac100
                            </h:panelGroup>
                            <h:panelGroup>
                                Element gives transparency specified value <br />
                                <br />
                                .Opac100{ opacity:1; -webkit-opacity:1; -moz-opacity:1;} ,
                                .Opac95{ opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95;} <br />
                                .Opac90{ opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9;} <br />
                                .Opac80{ opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8;} <br />
                                .Opac70{ opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7;} <br />
                                .Opac60{ opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6;} <br />
                                .Opac50{ opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5;} <br />
                                .Opac40{ opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4;} <br />
                                .Opac30{ opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3;} <br />
                                .Opac20{ opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2;} <br />
                                .Opac10{ opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1;} <br />
                                .OpacZero{ opacity:0; -webkit-opacity:0; -moz-opacity:0;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="Fleft navyblueback red Wid20 MarAuto Opac10">Opac10</div>
                        <div class="Fleft navyblueback red Wid20 MarAuto Opac30">Opac30</div>
                        <div class="Fleft navyblueback red Wid20 MarAuto Opac50">Opac50</div>
                        <div class="Fleft navyblueback red Wid20 MarAuto Opac70">Opac70</div>
                        <div class="Fleft navyblueback red Wid20 MarAuto Opac100">Opac100</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">WidX's</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Width Special Values</h:panelGroup>
                            <h:panelGroup class="hardblue">
                                Wid100 <br />
                                Wid90 <br />
                                Wid80 <br />
                                Wid70 <br />
                                Wid60 <br />
                                Wid50 <br />
                                Wid45 <br />
                                Wid40 <br />
                                Wid33 <br />
                                Wid30 <br />
                                Wid25 <br />
                                Wid20 <br />
                                Wid10
                            </h:panelGroup>
                            <h:panelGroup>
                                Element data width is specified with a percentage value. Add Responsive class to apply responsive features.<br />
                                <br />
                                .Wid100{ width:100%;} ,
                                .Wid90{ width:90%;} ,
                                .Wid80{ width:80%;} ,
                                .Wid70{ width:70%;} ,
                                .Wid60{ width:60%;} ,
                                .Wid50{ width:50%;} ,
                                .Wid45{ width:45%;} ,
                                .Wid40{ width:40%;} ,
                                .Wid30{ width:30%;} ,
                                .Wid33{ width:33.3%;} ,
                                .Wid25{ width:25%;} ,
                                .Wid20{ width:20%;} ,
                                .Wid10{ width:10%;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="Fleft orangeback white Wid20 MarAuto Responsive"> <br />Wid20 - Responsive<br /><br /> </div>
                        <div class="Fleft redback white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="Fleft navyblueback white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="Fleft greenback white Wid20 MarAuto Responsive"> <br />Wid20 - Responsive<br /><br /> </div>
                        <div class="Fleft leadenback white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="EmptyBox10"/>
                        <div class="Fleft redback white Wid33 MarAuto Responsive"> <br />Wid33 - Responsive<br /><br /> </div>
                        <div class="Fleft orangeback white Wid33 MarAuto Responsive"> <br />Wid33 - Responsive<br /><br /> </div>
                        <div class="Fleft navyblueback white Wid33 MarAuto Responsive"> <br />Wid33 - Responsive<br /><br /> </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Text Aligning</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Text Align</h:panelGroup>
                            <h:panelGroup class="hardblue">TexAlCenter</h:panelGroup>
                            <h:panelGroup>
                                Centers the text<br />
                                <br />
                                .TexAlCenter{ text-align:center;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">TexAlLeft</h:panelGroup>
                            <h:panelGroup>
                                Aligns the text to the left <br />
                                <br />
                                .TexAlLeft{ text-align:left;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">TexAlRight</h:panelGroup>
                            <h:panelGroup>
                                Aligns the text to the right <br />
                                <br />
                                .TexAlRight{ text-align:right;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="TexAlCenter Container100">This text align center</div>
                        <div class="TexAlLeft Container100">This text align left</div>
                        <div class="TexAlRight Container100">This text align right</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Box Size</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Box Sizing</h:panelGroup>
                            <h:panelGroup class="hardblue">BoxSizeContent</h:panelGroup>
                            <h:panelGroup>
                                Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included <br />
                                <br />
                                .BoxSizeContent{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">BoxSizeBorder</h:panelGroup>
                            <h:panelGroup>
                                The width and height properties (and min/max properties) includes content, padding and border, but not the margin <br />
                                <br />
                                .BoxSizeBorder{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class="BoxSizeBorder Container30 redback white" style="border:solid 10px #0bb113;"><div class="ContainerIndent">Box Sizing : BoxSizeBorder (same width with below box)</div></div>
                        <div class="EmptyBox10"></div>
                        <div class="BoxSizeContent Container30 redback white"><div class="ContainerIndent">Box Sizing : BoxSizeContent</div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Font Sizes</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Font Size</h:panelGroup>
                            <h:panelGroup class="hardblue">
                                Fs130 <br />
                                Fs100 <br />
                                Fs60 <br />
                                Fs50 <br />
                                Fs40 <br />
                                Fs30 <br />
                                Fs29 <br />
                                Fs28 <br />
                                Fs27 <br />
                                Fs26 <br />
                                Fs25 <br />
                                Fs24 <br />
                                Fs23 <br />
                                Fs22 <br />
                                Fs21 <br />
                                Fs20 <br />
                                Fs19 <br />
                                Fs18 <br />
                                Fs17 <br />
                                Fs16 <br />
                                Fs15 <br />
                                Fs14 <br />
                                Fs13 <br />
                                Fs14 <br />
                                Fs13 <br />
                                Fs12 <br />
                                Fs11 <br />
                                Fs10 <br />
                                Fs9
                            </h:panelGroup>
                            <h:panelGroup>
                                Set to the specified pixel value of font-size. <br />
                                <br />
                                .Fs9{font-size:9px !important;} <br />
                                .Fs10{font-size:10px !important;} <br />
                                .Fs11{font-size:11px !important;} <br />
                                .Fs12{font-size:12px !important;} <br />
                                .Fs13{font-size:13px !important;} <br />
                                .Fs14{font-size:14px !important;} <br />
                                .Fs15{font-size:15px !important;} <br />
                                .Fs16{font-size:16px !important;} <br />
                                .Fs17{font-size:17px !important;} <br />
                                .Fs18{font-size:18px !important;} <br />
                                .Fs19{font-size:19px !important;} <br />
                                .Fs20{font-size:20px !important;} <br />
                                .Fs21{font-size:21px !important;} <br />
                                .Fs22{font-size:22px !important;} <br />
                                .Fs23{font-size:23px !important;} <br />
                                .Fs24{font-size:24px !important;} <br />
                                .Fs25{font-size:25px !important;} <br />
                                .Fs26{font-size:26px !important;} <br />
                                .Fs27{font-size:27px !important;} <br />
                                .Fs28{font-size:28px !important;} <br />
                                .Fs29{font-size:29px !important;} <br />
                                .Fs30{font-size:30px !important;} <br />
                                .Fs40{font-size:40px !important;} <br />
                                .Fs50{font-size:50px !important;} <br />
                                .Fs60{font-size:60px !important;} <br />
                                .Fs100{font-size:100px !important;} <br />
                                .Fs130{font-size:130px !important;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <span class="Fs14">Font Size : 14px</span><br />
                        <span class="Fs18">Font Size : 18px</span><br />
                        <span class="Fs24">Font Size : 24px</span><br />
                        <span class="Fs30">Font Size : 30px</span><br />
                        <span class="Fs60">Font Size : 60px</span>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Font Weights</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Font Weight</h:panelGroup>
                            <h:panelGroup class="hardblue">FontBold</h:panelGroup>
                            <h:panelGroup>
                                Defines thick characters. <br />
                                <br />
                                .FontBold{ font-weight:bold;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">FontLight</h:panelGroup>
                            <h:panelGroup>
                                Defines lighter characters. <br />
                                <br />
                                .FontLight{ font-weight:lighter;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">FontNormal</h:panelGroup>
                            <h:panelGroup>
                                Defines normal characters. This is default. <br />
                                <br />
                                .FontNormal{ font-weight:normal;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter" style="font-family:Verdana !important;">
                        <span class="Fs20 FontBold orange">This is bold text</span><br />
                        <span class="Fs20 FontLighter orange">This is lighter text</span>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Transitions Timing (For CSS3 Animations)</div>
                        <div class="EmptyBox10"/>
                        <p:panelGrid columns="3" styleClass="Wid100">
                            <h:panelGroup class="orange Fs20 Wid30">Class Group</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid30">Class Name</h:panelGroup>
                            <h:panelGroup class="orange Fs20 Wid40">Instructions</h:panelGroup>

                            <h:panelGroup class="Fs20">Transitions Timing</h:panelGroup>
                            <h:panelGroup class="hardblue">Animated03</h:panelGroup>
                            <h:panelGroup>
                                Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 300 milli-seconds with easing) <br />
                                <br />
                                .Animated05{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Animated05</h:panelGroup>
                            <h:panelGroup>
                                Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 500 milli-seconds with easing) <br />
                                <br />
                                .Animated05{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
                            </h:panelGroup>

                            <h:panelGroup class="Fs20"></h:panelGroup>
                            <h:panelGroup class="hardblue">Animated1</h:panelGroup>
                            <h:panelGroup>
                                Make css3 transitions with the specified duration. ( Animated1 = Transition ends in 1 second with easing) <br />
                                <br />
                                .Animated1{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>
                    <p:panel styleClass="TexAlCenter">
                        <div class=" Animated05 changecolor Container40 white redback" style="margin-right: 10px;"><br />Hover Here ( Color and padding changing in 500 milli-seconds with Animated05 )<br /><br /></div>
                        <div class=" Animated1 changecolor Container40 white navyblueback"><br />Hover Here ( Color and padding changing in 1 second with Animated1 )<br /><br /></div>
                    </p:panel>

                    <div class="EmptyBox60"/>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>